<template>
    <div>
        <!--引用表格-->
        <BasicTable @register="registerTable" :rowSelection="rowSelection" @edit-end="handleEditEnd"
            @edit-cancel="handleEditCancel" :beforeEditSubmit="beforeEditSubmit">
            <!--插槽:table标题-->
            <template #tableTitle>
                <a-button type="primary" v-auth="'org.jeecg.modules.xl:xl_product_info:add'" @click="handleAdd"
                    preIcon="ant-design:plus-outlined"> 新增</a-button>
                <a-button type="primary" v-auth="'org.jeecg.modules.xl:xl_product_info:exportXls'"
                    preIcon="ant-design:export-outlined" @click="handleCumstomerProcductExport"> 导出</a-button>
                <j-upload-button type="primary" v-auth="'org.jeecg.modules.xl:xl_product_info:importExcel'"
                    preIcon="ant-design:import-outlined" @click="handleCumstomerProcductInport">导入</j-upload-button>

                <a-button type="default"
                    @click="handleExportXls('渠道商品导入模版', '/xl/template/downloadTemplateXls?template=prodcutcustomerimport')">
                    <Icon icon="line-md:download-off-loop" />下载模板
                </a-button>
                <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
                    <template #overlay>
                        <a-menu>
                            <a-menu-item key="1" @click="batchHandleDelete">
                                <Icon icon="ant-design:delete-outlined"></Icon>
                                删除
                            </a-menu-item>
                        </a-menu>
                    </template>
                    <a-button v-auth="'org.jeecg.modules.xl:xl_product_info:deleteBatch'">批量操作
                        <Icon icon="mdi:chevron-down"></Icon>
                    </a-button>
                </a-dropdown> -->
                <!-- 高级查询 -->
                <!-- <super-query :config="superQueryConfig" @search="handleSuperQuery" /> -->
            </template>
            <!--操作栏-->
            <template #action="{ record }">
                <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
            </template>
            <template #img="{ text }">
                <Image :src="text" :preview="true" height="150px" width="150px" />
            </template>


        </BasicTable>
        <!-- 表单区域 -->
        <!-- //@success="handleSuccess" @getSelectResult="onSelectDataOk" -->
        <ProductInfoAddModal @register="registerModal" @success="handleSuccess">
        </ProductInfoAddModal>
    </div>
</template>

<script lang="ts" name="org.jeecg.modules.xl-xlProductInfo" setup>
import { ref, reactive, computed, unref } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage'
import { useModal } from '/@/components/Modal';
import ProductInfoAddModal from './ProductInfoAddModal.vue'
import { columns, searchFormSchema } from '../XlProductInfo.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from '../XlProductInfo.api';
import { downloadFile } from '/@/utils/common/renderUtils';
import { useUserStore } from '/@/store/modules/user';
import { Image } from 'ant-design-vue';
const queryParam = reactive<any>({});
const checkedKeys = ref<Array<string | number>>([]);
const userStore = useUserStore();
import { message } from 'ant-design-vue';
import { propTypes } from '/@/utils/propTypes';
const props = defineProps({
    type: propTypes.string.def(''),
});

import { useMethods } from '/@/hooks/system/useMethods';
const { handleExportXls, handleImportXls } = useMethods();

//注册model
const [registerModal, { openModal,closeModal }] = useModal();
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
        title: 'productcostmoer',
        api: list,
        columns: columns,
        canResize: false,
        immediate: false,
        showActionColumn: true,
        formConfig: {
            labelWidth: 120,
            schemas: searchFormSchema,
            autoSubmitOnEnter: true,
            showAdvancedButton: true,
            fieldMapToNumber: [
            ],
            fieldMapToTime: [
            ],
        },
        actionColumn: {
            width: 120,
            fixed: 'right'
        },
        beforeFetch: (params) => {
            if (props.type =="noselected") {
                message.warning('请先选择左侧标签');
                return;
            } 
            return Object.assign(params, { type: props.type });
            
        },
    },
    exportConfig: {
        name: "渠道",
        url: getExportUrl,
        params: queryParam,
    },
    importConfig: {
        url: getImportUrl,
        success: handleSuccess
    },
})

const [registerTable, { reload, getDataSource, setTableData }, { rowSelection, selectedRowKeys }] = tableContext

defineExpose({
    reload
})

/**
 * 新增事件
 */
function handleAdd() {
    // if ("noselected" == props.type) {
    //     message.warning('请先选择左侧渠道标签再点击新增!');
    //     return;
    // } else {
    //     openModal(true, {
    //         operateType: "add"
    //     });
    // }
    openModal(true, {
        operateType: "add"
    });
}
/**
 * 编辑事件
 */
function handleEdit(record: Recordable) {
    openModal(true, {
        record,
        operateType: "edit"
    });
}
/**
 * 详情
*/
function handleDetail(record: Recordable) {
    openModal(true, {
        record,
        operateType: "detail"
    });
}
/**
 * 删除事件
 */
async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
}
/**
 * 批量删除事件
 */
async function batchHandleDelete() {
    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
}
/**
 * 成功回调
 */
function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
}

//刷新表格

/**
   * 操作栏
   */
function getTableAction(record) {
    return [
        // {
        //     label: '编辑',
        //     onClick: handleEdit.bind(null, record),
        //     auth: 'org.jeecg.modules.xl:xl_product_info:edit'
        // }
        {
            label: '删除',
            popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
                placement: 'topLeft'
            }
        }
    ]
}


/**
 * 下拉操作栏
 */
function getDropDownAction(record) {
    return [
        // {
        //     label: '详情',
        //     onClick: handleDetail.bind(null, record),
        // }, 
        // {
        //     label: '删除',
        //     popConfirm: {
        //         title: '是否确认删除',
        //         confirm: handleDelete.bind(null, record),
        //         placement: 'topLeft'
        //     }
            // ,
            // auth: 'org.jeecg.modules.xl:xl_product_info:delete'
        //}
    ]
}

 
function handleEditEnd({ record, index, key, value }: Recordable) {
    console.log(record, index, key, value);
    console.log('handleEditEnd');
    return false;
}

// 模拟将指定数据保存
import { saveOrUpdate } from '../XlProductInfo.api';
 async function beforeEditSubmit({ record, index, key, value }) {
    // console.log('单元格数据正在准备提交', { record, index, key, value });
     // return 1; //await feakSave({ id: record.id, key, value });
    debugger
     try {
         console.log({ record, index, key, value })
         record.supplyPrice = value;
         //提交表单
         await saveOrUpdate(record, true);
         
     } finally {
     }
}

function handleEditCancel() {
    console.log('cancel');
}


async function onSelectDataOk(options, selectList, selectRows) {
    console.log('cancel');
   // debugger
    //setTableData(selectRows)
    // closeModal();
    // await saveOrUpdate(selectRows, false);
} 
 
function handleCumstomerProcductInport(file) {

    handleImportXls(file, '/xl/productcustomer/importExcel', '').then(() => {
        handleSuccess();
    });
    
}
function handleCumstomerProcductExport(file) {
    if ("noselected" == props.type) {
        message.warning('请先选择左侧渠道标签再点击导出!');
        return;
    } 
    let ss = Object.assign(queryParam, { type: props.type });
    console.log(queryParam.value)
    return handleExportXls("客户" + props.type +"的商品", "/xl/productcustomer/exportXls", ss);

}
</script>

<style lang="less" scoped>
:deep(.ant-picker),
:deep(.ant-input-number) {
    width: 100%;
}
</style>